<template>
  <div class="bg">
    <img :src="currentImage" alt="" class="blur-up">
    <div class="press pulse" @click="award">
      <img style="height: 500px;" src="https://img-blog.csdnimg.cn/direct/ec034282b28041cc9a7d66019ecb07e9.jpeg" alt="" class="center-image">
    </div>
  </div>
</template>

<script>
export default {
  name: 'pass',
  data() {
    return {
      click: true,
      images: [
        'https://i-blog.csdnimg.cn/direct/df2156efcf144bab91be89e7475965fb.png',
        'https://img-blog.csdnimg.cn/5f0290de0ca84157a89c57537e5c297d.png',
        'https://img-blog.csdnimg.cn/79e2a435e8a14bb680145fa63ff0c1e2.png',
        'https://img-blog.csdnimg.cn/fa39426ad6f1444da4cf072bd019d996.png',
        'https://img-blog.csdnimg.cn/317701c1e9944e13a26301ca28c7700c.png',
        'https://img-blog.csdnimg.cn/4a55789e2944464880993c66398b4a7f.png',
        'https://img-blog.csdnimg.cn/22803c7331034b04bf36c6bd3f683394.jpeg',
        'https://img-blog.csdnimg.cn/4ea353b329674132bc7491f605d7b6a4.png',
        'https://img-blog.csdnimg.cn/7e157aff82224a689dba23fcad128851.jpeg',
        'https://img-blog.csdnimg.cn/63b767be0fde47f7b0b2de75deabdde0.png',
        'https://img-blog.csdnimg.cn/b09d68a836ad469383c5126b308982c7.png',
        'https://img-blog.csdnimg.cn/c6767852d6a548c8815114d450367c0d.jpeg',
        'https://img-blog.csdnimg.cn/47c63b9ef3da41fb96aee74ad19fa009.jpeg'
      ],
      currentImage: ''
    }
  },
  created() {
    this.setCurrentImage();
  },
  methods: {
    setCurrentImage() {
      const randomIndex = Math.floor(Math.random() * this.images.length);
      this.currentImage = this.images[randomIndex];
    },
    award() {
      if (this.click) {
        this.click = false
        const randomStatus = Math.random() < 0.5 ? 'failure' : 'success';
        const res = {
          data: {
            status: randomStatus
          }
        };
        // 模拟异步行为，实际中应替换为真实API调用
        setTimeout(() => {
          if (res.data.status === 'failure') {
            this.$router.replace('/failure')
          } else if (res.data.status === 'success') {
            this.$router.replace('/success')
          }
        }, 500); // 模拟网络延迟
      }
    }
  }
}
</script>
<style scoped>
.bg {
  width: 100%;
  height: 1500px;
  position: relative;
  overflow: hidden; /* Ensure the image is clipped properly */
  background-color: rgba(155, 155, 155, 0.1); /* A subtle background color */
}

.bg img.blur-up {
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: blur(5px);
  transition: filter 1s ease-out;
}

.press {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  animation: pulse 2s infinite;
}

.center-image {
  transform: scale(0.8);
  transition: transform 0.5s ease;
}

.press:hover .center-image {
  transform: scale(1);
}

/* Keyframe animation for pulsing effect */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Animation for image blur on hover */
.blur-up {
  animation: blurFadeIn 3s forwards;
}

@keyframes blurFadeIn {
  0% {
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
</style>